<template>
  <div>
    <FormPanel ref="formPanel" :list="formList" :cols="2" :isSubmitBtn="false" labelWidth="100" />
    <FilterTable ref="table" :columns="columns" :isSelectColumn="false" :params="fetchParams" :height="120" :onColumnsChange="columns => (this.columns = columns)" />
  </div>
</template>
<script>
import { queryPartReplcae } from '@/api/repair/activitiesManage/activitiesPackageQuery';
export default {
  props: ['replace'],
  data() {
    return {
      formList: this.createFormList(),
      columns: this.createTableColumns(),
      fetchParams: { xhrAbort: true }
    };
  },
  mounted() {
    this.queryPartReplcae(this.replace.PACKAGE_ID);
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.formList.forEach(x => {
        x.initialValue = this.replace[x.fieldName];
      });
    },
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '套餐代码',
          fieldName: 'PACKAGE_CODE',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '套餐名称',
          fieldName: 'PACKAGE_NAME',
          disabled: true
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '项目代码',
          dataIndex: 'LABOUR_CODE',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '项目名称',
          dataIndex: 'LABOUR_NAME',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '备件代码',
          dataIndex: 'PART_NO',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '备件名称',
          dataIndex: 'PART_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '数量',
          dataIndex: 'PART_QUANTITY',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '替换件代码',
          dataIndex: 'REPLACE_PART_NO',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '替换件名称',
          dataIndex: 'REPLACE_PART_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '替换件数量',
          dataIndex: 'REPLACE_PART_QUANTITY',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    async queryPartReplcae(id) {
      const res = await queryPartReplcae(id);
      this.$refs.table.$refs.pageTable.EXECUTE_INSERT(res.data.rows);
    },
    closeDetails() {
      this.$emit('close', false);
    }
  }
};
</script>
